<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if IE 10]> <html lang="en" class="ie10"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
	<meta charset="utf-8" />
	<title>Conquer | UI Elements - General</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
	<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href="assets/css/style.css" rel="stylesheet" />
	<link href="assets/css/style_responsive.css" rel="stylesheet" />
	<link href="assets/css/style_default.css" rel="stylesheet" id="style_color" />
	<link href="#" rel="stylesheet" id="style_metro" />
	<link rel="stylesheet" type="text/css" href="assets/gritter/css/jquery.gritter.css" />
	<link rel="stylesheet" type="text/css" href="assets/uniform/css/uniform.default.css" />
	<link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="fixed-top">
	<!-- BEGIN HEADER -->
	<div id="header" class="navbar navbar-inverse navbar-fixed-top">
		<!-- BEGIN TOP NAVIGATION BAR -->
		<div class="navbar-inner">
			<div class="container-fluid">
				<!-- BEGIN LOGO -->
				<a class="brand" href="index.html">
				<img src="assets/img/logo.png" alt="Conquer"/>
				</a>
				<!-- END LOGO -->
				<!-- BEGIN RESPONSIVE MENU TOGGLER -->
				<a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="arrow"></span>
				</a>          
				<!-- END RESPONSIVE MENU TOGGLER -->				
				<div class="top-nav">
					<!-- BEGIN QUICK SEARCH FORM -->
					<form class="navbar-search hidden-phone">
						<div class="search-input-icon">
							<input type="text" class="search-query dropdown-toggle" id="quick_search" placeholder="Search" data-toggle="dropdown" />
							<i class="icon-search"></i>
							<!-- BEGIN QUICK SEARCH RESULT PREVIEW -->
							<ul class="dropdown-menu extended">								
								<li>
									<span class="arrow"></span>
									<p>Found 23 results</p>
								</li>
								<li>
									<a href="#">
									<span class="label label-success"><i class="icon-user"></i></span>
									Nick Kim, Technical Mana...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-info"><i class="icon-money"></i></span>
									Anual Report,Dec 20...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-warning"><i class="icon-comment"></i></span>
									Re: Nick Dalton, Sep 11:...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-important"><i class="icon-bullhorn"></i></span>
									Office Setup, Mar 12...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-info"><i class="icon-envelope"></i></span>
									Re: Order Status, Jan 12...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-info"><i class="icon-paper-clip"></i></span>
									project_2011.docx, Feb 12...<i class="icon icon-arrow-right"></i>
									</a>
								</li>
								<li>
									<a href="#">
									See all results...
									</a>
								</li>
							</ul>
							<!-- END QUICK SEARCH RESULT PREVIEW -->
						</div>
					</form>
					<!-- END QUICK SEARCH FORM -->
					<!-- BEGIN TOP NAVIGATION MENU -->					
					<ul class="nav pull-right" id="top_menu">
						<!-- BEGIN NOTIFICATION DROPDOWN -->	
						<li class="dropdown" id="header_notification_bar">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-warning-sign"></i>
							<span class="label label-important">15</span>
							</a>
							<ul class="dropdown-menu extended notification">
								<li>
									<p>You have 14 new notifications</p>
								</li>
								<li>
									<a href="#">
									<span class="label label-success"><i class="icon-plus"></i></span>
									New user registered. 
									<span class="small italic">Just now</span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-important"><i class="icon-bolt"></i></span>
									Server #12 overloaded. 
									<span class="small italic">15 mins</span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-warning"><i class="icon-bell"></i></span>
									Server #2 not respoding.
									<span class="small italic">22 mins</span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-info"><i class="icon-bullhorn"></i></span>
									Application error.
									<span class="small italic">40 mins</span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-important"><i class="icon-bolt"></i></span>
									Database overloaded 68%. 
									<span class="small italic">2 hrs</span>
									</a>
								</li>
								<li>
									<a href="#">
									<span class="label label-important"><i class="icon-bolt"></i></span>
									2 user IP addresses blacklisted.
									<span class="small italic">5 hrs</span>
									</a>
								</li>
								<li>
									<a href="#">See all notifications</a>
								</li>
							</ul>
						</li>
						<!-- END NOTIFICATION DROPDOWN -->
						<!-- BEGIN INBOX DROPDOWN -->
						<li class="dropdown" id="header_inbox_bar">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-envelope-alt"></i>
							<span class="label label-success">5</span>
							</a>
							<ul class="dropdown-menu extended inbox">
								<li>
									<p>You have 12 new messages</p>
								</li>
								<li>
									<a href="#">
									<span class="photo"><img src="./assets/img/avatar-mini.png" alt="avatar"/></span>
									<span class="subject">
									<span class="from">Lisa Wong</span>
									<span class="time">Just Now</span>
									</span>
									<span class="message">
									Vivamus sed auctor nibh congue nibh.
									</span>  
									</a>
								</li>
								<li>
									<a href="#">
									<span class="photo"><img src="./assets/img/avatar-mini.png" alt="avatar"/></span>
									<span class="subject">
									<span class="from">Alina Fionovna</span>
									<span class="time">16 mins</span>
									</span>
									<span class="message">
									Vivamus sed auctor nibh congue.
									</span>  
									</a>
								</li>
								<li>
									<a href="#">
									<span class="photo"><img src="./assets/img/avatar-mini.png" alt="avatar"/></span>
									<span class="subject">
									<span class="from">Mila Rock</span>
									<span class="time">2 hrs</span>
									</span>
									<span class="message">
									Vivamus sed auctor nibh congue.
									</span>  
									</a>
								</li>
								<li>
									<a href="#">See all messages</a>
								</li>
							</ul>
						</li>
						<!-- END INBOX DROPDOWN -->
						<li class="divider-vertical hidden-phone hidden-tablet"></li>
						<!-- BEGIN USER LOGIN DROPDOWN -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-wrench"></i>
							<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="icon-cogs"></i> System Settings</a></li>
								<li><a href="#"><i class="icon-pushpin"></i> Shortcuts</a></li>
								<li><a href="#"><i class="icon-trash"></i> Trash</a></li>								
							</ul>
						</li>
						<!-- END USER LOGIN DROPDOWN -->
						<li class="divider-vertical hidden-phone hidden-tablet"></li>
						<!-- BEGIN USER LOGIN DROPDOWN -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-user"></i>
							<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="icon-user"></i> Mark King</a></li>
								<li><a href="#"><i class="icon-envelope-alt"></i> Inbox</a></li>
								<li><a href="#"><i class="icon-tasks"></i> Tasks</a></li>
								<li><a href="#"><i class="icon-ok"></i> Calendar</a></li>
								<li class="divider"></li>
								<li><a href="index.php"><i class="icon-key"></i> Log Out</a></li>
							</ul>
						</li>
						<!-- END USER LOGIN DROPDOWN -->
					</ul>
					<!-- END TOP NAVIGATION MENU -->	
				</div>
			</div>
		</div>
		<!-- END TOP NAVIGATION BAR -->
	</div>
	<!-- END HEADER -->
	<!-- BEGIN CONTAINER -->
	<div id="container" class="row-fluid">
		<!-- BEGIN SIDEBAR -->
		<div id="sidebar" class="nav-collapse collapse">
			<!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
			<div class="navbar-inverse">
				<form class="navbar-search visible-phone">
					<input type="text" class="search-query" placeholder="Search" />
				</form>
			</div>
			<!-- END RESPONSIVE QUICK SEARCH FORM -->
			<!-- BEGIN SIDEBAR MENU -->
			<ul>
				<li>
					<a href="index.html">
					<i class="icon-home"></i> Dashboard
					</a>					
				</li>
				<li class="has-sub active">
					<a href="javascript:;" class="">
					<i class="icon-bookmark-empty"></i> UI Elements
					<span class="arrow"></span>
					</a>
					<ul class="sub">
						<li class="active"><a class="" href="ui_elements_general.html">General</a></li>
						<li><a class="" href="ui_elements_buttons.html">Buttons</a></li>
						<li><a class="" href="ui_elements_tabs_accordions.html">Tabs & Accordions</a></li>
						<li><a class="" href="ui_elements_typography.html">Typography</a></li>
					</ul>
				</li>
				<li><a class="" href="forms.html"><i class="icon-table"></i> Form Stuff</a></li>
				<li><a class="" href="tables.html"><i class="icon-table"></i> Data Tables</a></li>
				<li><a class="" href="grids.html"><i class="icon-th"></i> Grids & Portlets</a></li>
				<li><a class="" href="charts.html"><i class="icon-bar-chart"></i> Visual Charts</a></li>
				<li class="has-sub">
	               <a href="javascript:;" class="">
	               <i class="icon-map-marker"></i> Maps
	               <span class="arrow"></span>
	               </a>
	               <ul class="sub">
	                  <li><a class="" href="maps_google.html"> Google Maps</a></li>
	                  <li><a class="" href="maps_vector.html"> Vector Maps</a></li>
	               </ul>
	            </li>
				<li><a class="" href="calendar.html"><i class="icon-ok"></i> Calendar</a></li>
				<li><a class="" href="gallery.html"><i class="icon-camera"></i> Gallery</a></li>
				<li><a class="" href="index.php"><i class="icon-user"></i> Login Page</a></li>
			</ul>
			<!-- END SIDEBAR MENU -->
		</div>
		<!-- END SIDEBAR -->
		<!-- BEGIN PAGE -->
		<div id="body">
			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
			<div id="widget-config" class="modal hide">
				<div class="modal-header">
					<button data-dismiss="modal" class="close" type="button">×</button>
					<h3>Widget Settings</h3>
				</div>
				<div class="modal-body">
					<p>Here will be a configuration form</p>
				</div>
			</div>
			<!-- BEGIN PAGE CONTAINER-->
			<div class="container-fluid">
				<!-- BEGIN PAGE HEADER-->
				<div class="row-fluid">
					<div class="span12">
						<!-- BEGIN STYLE CUSTOMIZER-->
						<div id="styler" class="hidden-phone">
							<i class="icon-cog"></i>
							<span class="settings">
								<span class="text">Style:</span>
								<span class="colors">
									<span class="color-default" data-style="default">
									</span>
									<span class="color-grey" data-style="grey">
									</span>
									<span class="color-navygrey" data-style="navygrey">
									</span>											
									<span class="color-red" data-style="red">
									</span>	
								</span>
								<span class="layout">
									<label class="hidden-phone">
									<input type="checkbox" class="header" checked value="" />Sticky Header
									</label><br />
									<label><input type="checkbox" class="metro" value="" />Metro Style</label>
									<span class="space5"></span>
									<a class="btn fancybox-button" data-rel="fancybox-button" title="Conquer Large Desktop Preview"  href="assets/img/demo/desktop.png"><i class="icon-eye-open"></i> Screenshots</a>
									<a class="fancybox-button" data-rel="fancybox-button" title="Conquer Notebook Preview" href="assets/img/demo/notebook.png"></a>
									<a class="fancybox-button" data-rel="fancybox-button" title="Conquer Tablet Preview"  href="assets/img/demo/tablet.png"></a>
									<a class="fancybox-button" data-rel="fancybox-button" title="Conquer Phone Preview"  href="assets/img/demo/phone.png"></a>
								</span>
							</span>
						</div>
						<!-- END STYLE CUSTOMIZER-->      	
						<!-- BEGIN PAGE TITLE & BREADCRUMB-->							    			
						<h3 class="page-title">
							General
							<small>alerts, notifications, sliders and more</small>
						</h3>
						<ul class="breadcrumb">
							<li>
								<i class="icon-home"></i>
								<a href="index.html">Home</a> <span class="divider">/</span>
							</li>
							<li>
								<a href="index.html">UI Elements</a> <span class="divider">/</span>
							</li>
							<li><a href="">General</a></li>
						</ul>
						<!-- END PAGE TITLE & BREADCRUMB-->
					</div>
				</div>
				<!-- END PAGE HEADER-->
				<!-- BEGIN PAGE CONTENT-->
				<div id="page">
					<div class="row-fluid">
						<div class="span12">
							<!-- BEGIN ALERTS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Alerts</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<div class="alert">
										<button class="close" data-dismiss="alert">×</button>
										<strong>Warning!</strong> Your monthly traffic is reaching limit.
									</div>
									<div class="alert alert-success">
										<button class="close" data-dismiss="alert">×</button>
										<strong>Success!</strong> The page has been added.
									</div>
									<div class="alert alert-info">
										<button class="close" data-dismiss="alert">×</button>
										<strong>Info!</strong> You have 198 unread messages.
									</div>
									<div class="alert alert-error">
										<button class="close" data-dismiss="alert">×</button>
										<strong>Error!</strong> The daily cronjob has failed.
									</div>
								</div>
							</div>
							<!-- END ALERTS PORTLET-->
						</div>
					</div>
					<div class="row-fluid">
						<div class="span6">
							<!-- BEGIN INLINE NOTIFICATIONS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Inline Notifications</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<div class="alert alert-block alert-error fade in">
										<button type="button" class="close" data-dismiss="alert">×</button>
										<h4 class="alert-heading">Error!</h4>
										<p>
											Duis mollis, est non commodo luctus, 
											nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
										</p>
										<p>
											<a class="btn btn-danger" href="#">Do this</a> <a class="btn" href="#">Or do this</a>
										</p>
									</div>
									<div class="alert alert-block alert-success fade in">
										<button type="button" class="close" data-dismiss="alert">×</button>
										<h4 class="alert-heading">Success!</h4>
										<p>
											Duis mollis, est non commodo luctus, 
											nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
										</p>
										<p>
											<a class="btn btn-success" href="#">Do this</a> <a class="btn" href="#">Or do this</a>
										</p>
									</div>
									<div class="alert alert-block alert-info fade in">
										<button type="button" class="close" data-dismiss="alert">×</button>
										<h4 class="alert-heading">Info!</h4>
										<p>
											Duis mollis, est non commodo luctus, 
											nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
										</p>
										<p>
											<a class="btn btn-info" href="#">Do this</a> <a class="btn" href="#">Or do this</a>
										</p>
									</div>
									<div class="alert alert-block alert-warning fade in">
										<button type="button" class="close" data-dismiss="alert">×</button>
										<h4 class="alert-heading">Warning!</h4>
										<p>
											Duis mollis, est non commodo luctus, 
											nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
										</p>
										<p>
											<a class="btn btn-warning" href="#">Do this</a> <a class="btn" href="#">Or do this</a>
										</p>
									</div>
								</div>
							</div>
							<!-- END INLINE NOTIFICATIONS PORTLET-->
							<!-- BEGIN GRITTER NOTIFICATIONS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Gritter Notifications</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<h5>Click on below buttons to check it out.</h5>
									<a href="javascript:;" class="btn " id="gritter-regular">Regular</a>
									<a href="javascript:;" class="btn btn-success" id="gritter-sticky">Sticky</a>
									<a href="javascript:;" class="btn btn-info" id="gritter-without-image">Imageless</a>
									<div class="space10 visible-phone visible-tablet"></div>
									<a href="javascript:;" class="btn btn-warning" id="gritter-light">Light</a>
									<a href="javascript:;" class="btn btn-success" id="gritter-max">Max of 3</a>
									<a href="#" class="btn btn-info" id="gritter-remove-all">Remove all</a>
								</div>
							</div>
							<!-- END GRITTER NOTIFICATIONS PORTLET-->
							<!-- BEGIN PULSATE PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Pulsate</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<h5>Pulsate any page elements.</h5>
									<div id="pulsate-regular" style="padding:5px;">
										Repeating Pulsate
									</div>
									<div class="space20"></div>
									<hr />
									<a href="javascript:;" class="btn btn-success" id="pulsate-once">Pulsate me once</a>
									<a href="javascript:;" class="btn btn-info" id="pulsate-hover">Pulsate on hover</a>
									<div class="space10 visible-phone visible-tablet"></div>
									<a href="javascript:;" class="btn btn-danger" id="pulsate-crazy">Crazy pulsate :)</a>
								</div>
							</div>
							<!-- END PULSATE PORTLET-->
							<!-- BEGIN MODAL DIALOG PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Modal Dialogs</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<h5>Click on below buttons to check it out.</h5>
									<!-- Button to trigger modal -->
									<a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Modal Dialog</a>
									<a href="#myModal2" role="button" class="btn btn-danger" data-toggle="modal">Alert</a>
									<a href="#myModal3" role="button" class="btn btn-warning" data-toggle="modal">Confirm</a>
									<!-- Modal -->
									<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h3 id="myModalLabel1">Modal Header</h3>
										</div>
										<div class="modal-body">
											<p>Body goes here...</p>
										</div>
										<div class="modal-footer">
											<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
											<button class="btn btn-primary">Save</button>
										</div>
									</div>
									<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h3 id="myModalLabel2">Alert Header</h3>
										</div>
										<div class="modal-body">
											<p>Body goes here...</p>
										</div>
										<div class="modal-footer">
											<button data-dismiss="modal" class="btn btn-primary">OK</button>
										</div>
									</div>
									<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h3 id="myModalLabel3">Confirm Header</h3>
										</div>
										<div class="modal-body">
											<p>Body goes here...</p>
										</div>
										<div class="modal-footer">
											<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
											<button data-dismiss="modal" class="btn btn-primary">Confirm</button>
										</div>
									</div>
								</div>
							</div>
							<!-- END MODAL DIALOG PORTLET-->
							<!-- BEGIN tooltipsS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>tooltipss</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<p>
										Tight pants next level keffiyeh 
										<a href="#" class="tooltips" data-original-title="Default tooltips">you probably</a> haven't heard of them. 
										Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel 
										<a href="#" class="tooltips" data-original-title="Another tooltips">have a</a> 
										terry richardson vinyl chambray.
										<a href="#" class="tooltips" data-original-title="The last tip!">twitter handle</a> 
										freegan cred raw denim single-origin coffee viral.
									</p>
									<p>
										<button class="btn tooltips"  data-placement="top" data-original-title="tooltips in top">Top</button>
										<button class="btn tooltips"  data-placement="left" data-original-title="tooltips in left">Left</button>
										<button class="btn tooltips"  data-placement="right" data-original-title="tooltips in right">Right</button>
										<button class="btn tooltips"  data-placement="bottom" data-original-title="tooltips in bottom">Bottom</button>
									</p>
								</div>
							</div>
							<!-- END tooltipsS PORTLET-->
							<!-- BEGIN popoversS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>popoverss</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<p>
										Tight pants next level keffiyeh 
										<a href="javascript:;" class="popovers" data-content="popovers body goes here! popovers body goes here!" data-original-title="Default popovers">trigger me on click</a> haven't heard of them. 
										Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel 
										<a href="javascript:;" class="popovers" data-trigger="hover" data-content="popovers body goes here! popovers body goes here!" data-original-title="Another popovers">trigger me on hover</a> 
										terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.
									</p>
									<p>
										<button class="btn popovers"   data-trigger="hover" data-placement="top" data-content="popovers body goes here! popovers body goes here!" data-original-title="popovers in top">Top</button>
										<button class="btn popovers"  data-trigger="hover" data-placement="left" data-content="popovers body goes here! popovers body goes here!" data-original-title="popovers in left">Left</button>
										<button class="btn popovers"  data-trigger="hover" data-placement="right" data-content="popovers body goes here! popovers body goes here!" data-original-title="popovers in right">Right</button>
										<button class="btn popovers" data-trigger="hover" data-placement="bottom" data-content="popovers body goes here! popovers body goes here!" data-original-title="popovers in bottom">Bottom</button>
									</p>
								</div>
							</div>
							<!-- END popoversS PORTLET-->
						</div>
						<div class="span6">
							<!-- BEGIN PROGRESS BARS PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Progress Bars</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<div class="alert">
										Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
									</div>
									<h3>Basic</h3>
									<div class="progress">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-success">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-warning">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-danger">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<h3>Striped</h3>
									<div class="progress progress-striped">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-success">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-warning">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-danger">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<h3>Animated</h3>
									<div class="progress progress-striped active">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-success active">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-warning active">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<div class="progress progress-striped progress-danger active">
										<div style="width: 60%;" class="bar"></div>
									</div>
									<h3>Stacked</h3>
									<div class="progress">
										<div class="bar bar-success" style="width: 35%;"></div>
										<div class="bar bar-warning" style="width: 20%;"></div>
										<div class="bar bar-danger" style="width: 10%;"></div>
									</div>
								</div>
							</div>
							<!-- END PROGRESS BARS PORTLET-->
							<!-- BEGIN LABELS AND BADGES PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Labels and Badges</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<table class="table table-bordered table-striped">
										<thead>
											<tr>
												<th>Name</th>
												<th>Labels</th>
												<th>Badges</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>
													Default
												</td>
												<td>
													<span class="badge">1</span>
												</td>
												<td>
													<span class="label">Default</span>
												</td>
											</tr>
											<tr>
												<td>
													Success
												</td>
												<td>
													<span class="badge badge-success">2</span>
												</td>
												<td>
													<span class="label label-success">Success</span>
												</td>
											</tr>
											<tr>
												<td>
													Warning
												</td>
												<td>
													<span class="badge badge-warning">4</span>
												</td>
												<td>
													<span class="label label-warning">Warning</span>
												</td>
											</tr>
											<tr>
												<td>
													Important
												</td>
												<td>
													<span class="badge badge-important">6</span>
												</td>
												<td>
													<span class="label label-important">Important</span>
												</td>
											</tr>
											<tr>
												<td>
													Info
												</td>
												<td>
													<span class="badge badge-info">8</span>
												</td>
												<td>
													<span class="label label-info">Info</span>
												</td>
											</tr>
											<tr>
												<td>
													Inverse
												</td>
												<td>
													<span class="badge badge-inverse">10</span>
												</td>
												<td>
													<span class="label label-inverse">Inverse</span>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- END LABELS AND BADGES PORTLET-->
							<!-- BEGIN PAGINATION PORTLET-->
							<div class="widget">
								<div class="widget-title">
									<h4><i class="icon-reorder"></i>Pagination</h4>
									<span class="tools">
									<a href="javascript:;" class="icon-chevron-down"></a>
									<a href="#widget-config" data-toggle="modal" class="icon-wrench"></a>
									<a href="javascript:;" class="icon-refresh"></a>		
									<a href="javascript:;" class="icon-remove"></a>
									</span>							
								</div>
								<div class="widget-body">
									<div class="pagination pagination-large">
										<ul>
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li class="hidden-phone"><a href="#">4</a></li>
											<li><a href="#">»</a></li>
										</ul>
									</div>
									<div class="pagination">
										<ul>
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">»</a></li>
										</ul>
									</div>
									<div class="pagination pagination-small">
										<ul>
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">»</a></li>
										</ul>
									</div>
									<div class="pagination pagination-mini">
										<ul>
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">»</a></li>
										</ul>
									</div>
								</div>
							</div>
							<!-- END PAGINATION PORTLET-->
						</div>
					</div>
				</div>
				<!-- END PAGE CONTENT-->
			</div>
			<!-- END PAGE CONTAINER-->			
		</div>
		<!-- BEGIN PAGE -->	 	
	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<div id="footer">
		2012 &copy; Conquer. Admin Dashboard Template.
		<div class="span pull-right">
			<span class="go-top"><i class="icon-arrow-up"></i></span>
		</div>
	</div>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS -->
	<!-- Load javascripts at bottom, this will reduce page load time -->
	<script src="assets/js/jquery-1.8.2.min.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.blockui.js"></script>
	<!-- ie8 fixes -->
	<!--[if lt IE 9]>
	<script src="assets/js/excanvas.js"></script>
	<script src="assets/js/respond.js"></script>
	<![endif]-->
	<script type="text/javascript" src="assets/uniform/jquery.uniform.min.js"></script>
	<script type="text/javascript" src="assets/gritter/js/jquery.gritter.js"></script>
	<script type="text/javascript" src="assets/js/jquery.pulsate.min.js"></script>
	<script src="assets/fancybox/source/jquery.fancybox.pack.js"></script>
	<script src="assets/js/app.js"></script>		
	<script>
		jQuery(document).ready(function() {			
			// initiate layout and plugins
			App.init();
		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>